import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:qunaimedical/components/primary_button.dart';
import 'package:qunaimedical/utils/common_util.dart';

class SMSLoginPage extends StatefulWidget {
  @override
  _SMSLoginPageState createState() => _SMSLoginPageState();
}

class _SMSLoginPageState extends State<SMSLoginPage> {
  TextEditingController _controller = TextEditingController();

  String? _phoneNum;
  var _countdownTime = 0;
  Timer? _timer;

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
    _timer?.cancel();
  }

  @override
  void initState() {
    super.initState();
    _startCountdown();
  }

  @override
  Widget build(BuildContext context) {
    _phoneNum = ModalRoute.of(context)!.settings.arguments as String?;
    return Scaffold(
      appBar: AppBar(elevation: 0),
      body: ListView(
        padding: EdgeInsets.only(left: 30, right: 30, top: 30),
        children: [
          Text(
            "请输入验证码",
            style: TextStyle(
              color: Colors.black87,
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10, bottom: 50),
            child: Text(
              '验证码已发送至：${_phoneNum!.substring(0, 3)}****${_phoneNum!.substring(7, 11)}',
              style: TextStyle(color: Colors.grey[700]),
            ),
          ),
          TextField(
            keyboardType: TextInputType.number,
            controller: _controller,
            inputFormatters: [
              FilteringTextInputFormatter.digitsOnly,
              LengthLimitingTextInputFormatter(4),
            ],
            decoration: InputDecoration(
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey[300]!),
              ),
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey[300]!),
              ),
              hintText: '输入4位数字验证码',
              suffixIcon: _countdownTime == 0
                  ? TextButton(
                      onPressed: _getCode,
                      child: Text(
                        '获取验证码',
                        style: TextStyle(color: Theme.of(context).primaryColor),
                      ),
                    )
                  : Container(
                      width: 40,
                      alignment: Alignment.centerRight,
                      child: Text(
                        '$_countdownTime' + 's',
                        style: TextStyle(color: Theme.of(context).primaryColor),
                      ),
                    ),
            ),
          ),
          PrimaryButton(
            '登录',
            margin: EdgeInsets.symmetric(vertical: 60),
            onPressed: _login,
          )
        ],
      ),
    );
  }

  /// 开始倒计时
  void _startCountdown() {
    _countdownTime = 60;
    final call = (timer) {
      setState(() {
        _countdownTime -= 1;
        if (_countdownTime == 0) {
          _timer?.cancel();
        }
      });
    };
    _timer = Timer.periodic(Duration(seconds: 1), call);
  }

  void _login() async {
    CommonUtil.hideKeyboard(context);
  }

  void _getCode() async {
    CommonUtil.hideKeyboard(context);
  }
}
